<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title" :fromShare="fromShare"></status-bar>

        <view class="photo" v-if="pageData && pageData.detail">
            <image :src="$imgUrls(pageData.detail.photo)" mode="widthFix"></image>
            <view class="box">
                <view class="listBox" v-if="orderDataPart1.length">
                    <view class="scroll-container">
                        <view class="scroll-wrapper">
                            <view class="list" v-for="(item, index) in orderDataPart1" :key="item.id">
                                <view class="info">
                                    <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="v_headimg"></image>
                                    <view class="v_name">{{ item.v_name }}参加了活动</view>
                                </view>
                            </view>
                            <view class="list" v-for="(item, index) in orderDataPart1" :key="item.id">
                                <view class="info">
                                    <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="v_headimg"></image>
                                    <view class="v_name">{{ item.v_name }}参加了活动</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="listBox" v-if="orderDataPart2.length">
                    <view class="scroll-container">
                        <view class="scroll-wrapper">
                            <view class="list" v-for="(item, index) in orderDataPart2" :key="`${item.id}${index}`">
                                <view class="info">
                                    <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="v_headimg"></image>
                                    <view class="v_name">{{ item.v_name }}参加了活动</view>
                                </view>
                            </view>
                            <view class="list" v-for="(item, index) in orderDataPart2" :key="`${item.id}${index}`">
                                <view class="info">
                                    <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="v_headimg"></image>
                                    <view class="v_name">{{ item.v_name }}参加了活动</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="listBox" v-if="orderDataPart3.length">
                    <view class="scroll-container">
                        <view class="scroll-wrapper">
                            <view class="list" v-for="(item, index) in orderDataPart3" ::key="`${item.id}${index}`">
                                <view class="info">
                                    <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="v_headimg"></image>
                                    <view class="v_name">{{ item.v_name }}参加了活动</view>
                                </view>
                            </view>
                            <view class="list" v-for="(item, index) in orderDataPart3" :key="`${item.id}${index}`">
                                <view class="info">
                                    <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="v_headimg"></image>
                                    <view class="v_name">{{ item.v_name }}参加了活动</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="goodsBox" v-if="goodsData.length > 1">
            <view class="list" v-for="(item, index) in goodsData" :key="index" @click="toGoods(item.goods_id)">
                <image :src="$imgUrls(item.img)" mode="aspectFill" class="ImG"></image>
                <view class="goodContent">
                    <text class="name ellipsis">{{ item.name }}</text>
                    <text class="info ellipsis">{{ item.info }}</text>
                    <view class="d-flex a-center color_F4">
                        <text class="size20">￥</text>
                        <text class="size30">{{ item.price }}</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="content">
            <view class="stateAct">{{ activityStatus }}</view>
            <view class="Box">
                <view class="Li">
                    <view class="d-flex f-column">
                        <text class="color_FF size36 bold">{{ browseallUserCount }}</text>
                        <text class="color_99 size26 m-top10">浏览量</text>
                    </view>
                    <view class="d-flex a-center p-re">
                        <block v-for="(item, index) in browseData.slice(0, 4)" :key="index">
                            <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="v_headimg"></image>
                        </block>
                    </view>
                </view>
                <view class="Li">
                    <view class="d-flex f-column">
                        <text class="color_FF size36 bold">{{ orderallUserCount }}</text>
                        <text class="color_99 size26 m-top10">参与人数</text>
                    </view>
                    <view class="d-flex a-center p-re">
                        <block v-for="(item, index) in orderData.slice(0, 4)" :key="index">
                            <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="v_headimg"></image>
                        </block>
                    </view>
                </view>
            </view>

            <view class="swiperBox" v-if="browseDataGroups.length">
                <swiper :indicator-dots="false" disable-touch class="wh" circular :display-multiple-items="3" vertical :autoplay="true" :interval="3000" :duration="1000">
                    <swiper-item class="sipItem" v-for="(group, groupIndex) in browseDataGroups" :key="groupIndex">
                        <view class="enBox" v-for="(item, index) in group" :key="item.id">
                            <view class="headBox">
                                <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="headimg"></image>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>

        <view class="content" v-if="orderData.length">
            <view class="stateAct">最新订单记录</view>
            <swiper :indicator-dots="false" disable-touch class="orderSwiper" :display-multiple-items="5" :autoplay="true" circular vertical :interval="3000" :duration="1000">
                <swiper-item v-for="(item, index) in orderData" :key="index">
                    <view class="swiper-item">
                        <view class="d-flex a-center flex-1">
                            <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="v_headimg"></image>
                            <view class="d-flex f-column">
                                <text class="black size30 ellipsis">{{ item.v_name }}</text>
                                <text class="color_99 size26">{{ item.add_time }}</text>
                            </view>
                        </view>
                        <text class="color_F4 size28">已支付{{ item.payment }}元</text>
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <view class="rows m-top20" v-if="pageData && pageData.detail.content">
            <u-parse :content="pageData.detail.content" :domain="imgUrl"></u-parse>
        </view>

        <view class="Store" v-if="store_info">
            <view class="info">
                <image :src="$imgUrls(store_info.logo)" mode="aspectFill" class="logo"></image>
                <view class="content">
                    <text class="black size30">{{ store_info.name }}</text>
                    <text class="color_99 size26 m-top10">{{ store_info.address }}</text>
                </view>
            </view>
            <view class="Store_fot">
                <view class="list Navigation" @click="OpenLocation">一键导航</view>
                <view class="list" @click="$common.Tel(store_info.phone)">一键拨号</view>
            </view>
        </view>

        <view class="fotter">
            <view class="Box">
                <view class="Btn" @click="Participate">{{ activityStatusfoter }}</view>
            </view>
        </view>
        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                fromShare: 0,
                showModal: false,
                title: '',
                act_id: '',
                pageData: '',
                orderData: [],
                orderallUserCount: '',
                browseData: [],
                browseallUserCount: '',
                orderDataPart1: [],
                orderDataPart2: [],
                orderDataPart3: [],
                goodsData: [],
                imgUrl: this.imgUrl,
                store_info: '',
                audioManager: null,
                isPlaying: true,
                background_music: ''
            };
        },
        onLoad(opt) {
            if (opt.act_id) this.act_id = opt.act_id;
            if (opt.fromShare) this.fromShare = opt.fromShare;
            this.getActOrderUserList();
            this.getActShowUserList();
            this.seckillIndex();
        },
        onShow() {
            // 页面显示时继续播放
            if (this.audioManager && !this.isPlaying) {
                this.audioManager.play();
            }
        },
        onHide() {
            // 页面隐藏时暂停播放
            if (this.audioManager && this.isPlaying) {
                this.audioManager.pause();
            }
        },
        methods: {
            seckillIndex() {
                this.$http
                    .post({
                        url: '/singleSaleApi/seckillIndex',
                        data: {
                            act_id: this.act_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data;
                        this.title = result.detail.name;
                        this.pageData = result;
                        this.background_music = result.detail.background_music;
                        this.store_info = result.detail.store_info;
                        this.goodsData = result.goods_list[0].goods;
                        this.Music();
                    });
            },
            getActOrderUserList() {
                this.$http
                    .post({
                        url: '/singleSaleApi/getActOrderUserList',
                        data: {
                            act_id: this.act_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        this.orderallUserCount = res.allUserCount;
                        const result = res.data || [];
                        this.orderData = result;
                        const partLength = Math.ceil(result.length / 3);

                        this.orderDataPart1 = result.slice(0, partLength);
                        this.orderDataPart2 = result.slice(partLength, partLength * 2);
                        this.orderDataPart3 = result.slice(partLength * 2);
                    });
            },

            getActShowUserList() {
                this.$http
                    .post({
                        url: '/singleSaleApi/getActShowUserList',
                        data: {
                            act_id: this.act_id,
                            page: 1,
                            limit: 1000
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.browseallUserCount = res.allUserCount;
                        this.browseData = result.filter((n) => n != null);
                    });
            },
            Participate() {
                if (!this.vid) return (this.showModal = true);
                const currentTime = Math.floor(Date.now() / 1000); // 获取当前十位时间戳
                const startTime = parseInt(this.pageData.detail.start_time);
                const endTime = parseInt(this.pageData.detail.end_time);
                if (currentTime < startTime || currentTime > endTime) return;
                let goods_ids = [];
                this.goodsData.forEach((n) => {
                    goods_ids.push(n.goods_id);
                });
                this.toUrl(`/orderPage/order/createOrders?goods_id=${goods_ids.join(',')}&goods_num=1`);
            },

            OpenLocation() {
                const obj = {
                    s_latitude: this.store_info.pointy,
                    s_longitude: this.store_info.pointx,
                    name: this.store_info.name,
                    nameAdress: this.store_info.address
                };
                this.$openLocation(obj);
            },
            Music() {
                this.audioManager = uni.getBackgroundAudioManager();
                this.audioManager.src = this.background_music;
                this.audioManager.title = this.title || '背景音乐'; // 必须设置title
                this.audioManager.loop = true; // 设置循环播放

                this.audioManager.onPlay(() => {
                    console.log('音乐开始播放');
                    this.isPlaying = true;
                });

                this.audioManager.onPause(() => {
                    console.log('音乐暂停');
                    this.isPlaying = false;
                });

                this.audioManager.onEnded(() => {
                    console.log('音乐播放结束');
                    // 由于设置了loop，这个事件可能不会触发
                    if (this.audioManager) {
                        this.audioManager.play();
                    }
                });

                this.audioManager.onStop(() => {
                    console.log('音乐停止');
                    this.isPlaying = false;
                });

                this.audioManager.onError((res) => {
                    console.log('音乐播放错误', res);
                    this.isPlaying = false;
                });

                // 开始播放
                this.audioManager.play();
            }
        },
        onUnload() {
            // 页面卸载时停止播放并释放资源
            if (this.audioManager) {
                this.audioManager.stop();
                this.audioManager = null;
            }
        },
        computed: {
            ...mapState(['color', 'vid']),
            browseDataGroups() {
                const groups = [];
                for (let i = 0; i < this.browseData.length; i += 5) {
                    groups.push(this.browseData.slice(i, i + 5));
                }
                return groups;
            },
            activityStatus() {
                if (!this.pageData || !this.pageData.detail) return '';

                const currentTime = Math.floor(Date.now() / 1000); // 获取当前十位时间戳
                const startTime = parseInt(this.pageData.detail.start_time);
                const endTime = parseInt(this.pageData.detail.end_time);

                if (currentTime < startTime) {
                    return '活动未开始';
                } else if (currentTime >= startTime && currentTime <= endTime) {
                    return '活动进行中';
                } else {
                    return '活动已结束';
                }
            },
            activityStatusfoter() {
                if (!this.pageData || !this.pageData.detail) return '';

                const currentTime = Math.floor(Date.now() / 1000); // 获取当前十位时间戳
                const startTime = parseInt(this.pageData.detail.start_time);
                const endTime = parseInt(this.pageData.detail.end_time);

                if (currentTime < startTime) {
                    return '活动未开始';
                } else if (currentTime >= startTime && currentTime <= endTime) {
                    return '立即购买';
                } else {
                    return '活动已结束';
                }
            }
        },
        onShareAppMessage(res) {
            return {
                title: `${this.pageData.detail.name}`,
                path: `/pages/index/index?id=${this.act_id}&pageType=33&share_v_id=${this.vid}`, // 动态设置跳转路径
                imageUrl: `${this.pageData.detail.photo}` // 分享图片链接
            };
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
    }
</style>
<style lang="scss" scoped>
    .Store {
        width: 710rpx;
        background-color: #fff;
        padding: 20rpx;
        border-radius: 10rpx;
        margin: 20rpx auto 0;
        display: flex;
        flex-direction: column;
        .info {
            width: 100%;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f1f1f1;
            padding-bottom: 20rpx;
            .logo {
                width: 100rpx;
                height: 100rpx;
                margin-right: 20rpx;
            }
            .content {
                flex: 1;
                display: flex;
                flex-direction: column;
            }
        }
        .Store_fot {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 20rpx;
            .list {
                width: 270rpx;
                height: 80rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
                border: 1px solid #000;
                border-radius: 10rpx;
            }
            .Navigation {
                background-color: #000;
                color: #fff;
            }
        }
    }
    .fotter {
        width: 100%;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 888;

        .Box {
            width: 100%;
            height: 120rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            .Btn {
                width: 700rpx;
                height: 90rpx;
                background-color: var(--color);
                color: #fff;
                font-size: 36rpx;
                border-radius: 45rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .goodsBox {
        width: 710rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        padding: 24rpx;
        border-radius: 10rpx;
        .list {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            .ImG {
                width: 130rpx;
                height: 130rpx;
                border-radius: 10rpx;
                margin-right: 20rpx;
            }
            .goodContent {
                flex: 1;
                height: 130rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .name {
                    color: #000;
                    font-size: 30rpx;
                }
                .info {
                    color: #999;
                    font-size: 24rpx;
                }
            }
        }
        .list:last-child {
            margin-bottom: 0;
        }
    }

    .content {
        width: 710rpx;
        margin: 24rpx auto 0;
        display: flex;
        flex-direction: column;

        .stateAct {
            color: #000;
            font-weight: bold;
            font-size: 32rpx;
        }

        .Box {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20rpx;

            .Li {
                width: 340rpx;
                background-color: #fff;
                padding: 24rpx;
                border-radius: 10rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .v_headimg {
                    width: 46rpx;
                    height: 46rpx;
                    border-radius: 50%;
                    display: block;
                    margin-left: -14rpx;
                }
            }
        }

        .orderSwiper {
            width: 100%;
            height: 580rpx;
            margin-top: 30rpx;
            position: relative;

            .swiper-item {
                width: 100%;
                height: 100rpx;
                background-color: #fff;
                border-radius: 10rpx;
                padding: 20rpx;
                display: flex;
                align-items: center;

                .v_headimg {
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }
            }
        }
        .orderSwiper::after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }

        .swiperBox {
            width: 100%;
            height: 380rpx;
            margin-top: 30rpx;
            position: relative;

            .sipItem {
                width: 100%;
                height: 100rpx;
                display: flex;

                .enBox {
                    width: 20%;
                    display: flex;
                    justify-content: center;

                    .headBox {
                        width: 100rpx;
                        height: 100rpx;
                        border: 1px solid #ff467f;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .headimg {
                            width: 88rpx;
                            height: 88rpx;
                            border-radius: 50%;
                        }
                    }
                }
            }
        }
        .swiperBox::after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    .photo {
        width: 100%;
        position: relative;

        .box {
            width: 100%;
            position: absolute;
            top: 100rpx;
            left: 0;

            .listBox {
                width: 100%;
                margin-bottom: 24rpx;
                overflow: hidden;
                position: relative;

                .scroll-container {
                    width: 100%;
                    height: 60rpx;
                    overflow: hidden;

                    .scroll-wrapper {
                        height: 100%;
                        display: inline-flex;
                        white-space: nowrap;
                        animation: scroll 40s linear infinite;
                        will-change: transform;

                        &:hover {
                            animation-play-state: paused;
                        }

                        .list {
                            display: inline-flex;
                            align-items: center;
                            height: 60rpx;
                            padding: 0 20rpx 0 10rpx;
                            background-color: rgba(0, 0, 0, 0.5);
                            color: #fff;
                            font-size: 24rpx;
                            margin-right: 30rpx;
                            border-radius: 30rpx;
                            flex-shrink: 0;

                            &:last-child {
                                margin-right: 0;
                            }

                            .info {
                                display: flex;
                                align-items: center;
                                height: 100%;

                                .v_headimg {
                                    width: 50rpx;
                                    height: 50rpx;
                                    border-radius: 50%;
                                    flex-shrink: 0;
                                }

                                .v_name {
                                    color: #fff;
                                    font-size: 26rpx;
                                    margin-left: 10rpx;
                                    white-space: nowrap;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
